/**
 * =============================================================================
 * ************   Input Field   ************
 * =============================================================================
 */

/* 文本框外层 */
.mdui-field {
  position: relative;
  padding: 16px 1px 8px;
}

.mdui-field-has-bottom {
  padding-bottom: 28px;
}

/* 文本框 label */
.mdui-field-label {
  display: block;
  width: 100%;
  color: rgba(0, 0, 0, 0.54);
  font-size: 16px;
  transform: scale(0.75) translateY(0);
  transform-origin: left;
  transition: all .2s;
  pointer-events: none;
}

/* 表单验证错误提示、帮助文本提示 */
.mdui-field-error,
.mdui-field-helper {
  position: absolute;
  bottom: 8px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  .mdui-text-truncate();
}

.mdui-field-error {
  color: rgba(red(@color-red-a400), green(@color-red-a400), blue(@color-red-a400), .87);
  visibility: hidden;
}

.mdui-field-helper {
  color: rgba(0, 0, 0, 0.54);
}


/* 表单中的图标
   ========== */
.mdui-field {
  &>.mdui-icon {
    position: absolute;
    bottom: 8px;
    padding: 6px;
    color: @color-black-icon;

    ~.mdui-input,
    ~.mdui-field-label,
    ~.mdui-field-error,
    ~.mdui-field-helper,
    ~.mdui-field-flex-wrap {
      /* stylelint-disable-next-line */
      width: calc(~"100% - 56px");
      margin-left: 56px;
    }
  }
}

.mdui-field-has-bottom {
  .mdui-icon {
    bottom: 28px;
  }
}

/* 聚焦状态的文本框
   ============= */
.mdui-field-focus {

  .mdui-field-label,
  &>.mdui-icon {
    color: rgba(red(@color-default-a700), green(@color-default-a700), blue(@color-default-a700), .87);
  }
}

/* 含有浮动标签的文本框
   ================ */
.mdui-field-floating-label {

  .mdui-input:not(:focus)::-webkit-input-placeholder {
    visibility: hidden;
  }

  .mdui-field-label {
    color: rgba(0, 0, 0, 0.35);
    transform: scale(1) translateY(27px);
  }

  &.mdui-field-focus,
  &.mdui-field-not-empty {
    .mdui-field-label {
      color: rgba(0, 0, 0, 0.65);
      transform: scale(0.75) translateY(0);
    }
  }

  &.mdui-field-focus {
    .mdui-field-label {
      .mdui-text-color(@color-accent-default-name);
    }
  }
}

/* 可展开文本框，默认向右展开
   ========== */
.mdui-field-expandable {
  width: 36px;
  min-height: 36px;
  padding: 1px 0;
  transition: width .3s @animation-curve-default;

  .mdui-field-close {
    .mdui-icon {
      bottom: 0;
      padding: 0;
    }
  }

  .mdui-input {
    /* stylelint-disable-next-line */
    width: calc(~"100% - 36px");
    margin-left: 36px;
    padding-right: 0;
  }

  .mdui-field-icon {
    position: absolute;
    top: 0;
    left: 0;
  }

  .mdui-field-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(0);
  }

  &.mdui-field-expanded {
    width: 100%;

    .mdui-input {
      padding-right: 36px;
    }

    .mdui-field-close {
      transform: scale(1);
    }
  }
}

/* 表单验证不通过
   =========== */
.mdui-field-invalid,
.mdui-field-invalid-html5 {

  .mdui-input {
    border-bottom-color: @color-red-a400 !important;
    box-shadow: 0 1px 0 0 @color-red-a400 !important;
  }

  .mdui-field-label {
    color: @color-red-a400 !important;
  }

  &.mdui-field-floating-label {
    .mdui-field-label {
      color: rgba(red(@color-red-a400), green(@color-red-a400), blue(@color-red-a400), 0.35) !important;
    }

    &.mdui-field-focus,
    &.mdui-field-not-empty {
      .mdui-field-label {
        color: @color-red-a400 !important;
      }
    }
  }

  .mdui-field-error {
    visibility: visible;

    &+.mdui-field-helper {
      visibility: hidden;
    }
  }
}

/* 禁用表单
   ====== */
.mdui-field-disabled {
  .mdui-field-label {
    color: @color-black-disabled;
  }
}

/* 字数统计
   ====== */
.mdui-field-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 12px;
  color: @color-black-secondary;
  font-size: 12px;
  line-height: 12px;
}


/**
 * =============================================================================
 * ************   Textfield dark   ************
 * =============================================================================
 */
.layout-theme({

  // 图标颜色
  .mdui-field {
    .mdui-icon {
      color: rgba(255, 255, 255, 0.7);
    }
  }

  // 标签颜色
  .mdui-field-label {
    color: rgba(255, 255, 255, 0.7);
  }

  .mdui-field-floating-label {
    .mdui-field-label {
      color: rgba(255, 255, 255, 0.35);
    }
  }

  // 错误文本颜色
  .mdui-field-error {
    color: @color-red-a400;
  }

  // 帮助文本颜色
  .mdui-field-helper {
    color: rgba(255, 255, 255, 0.7);
  }

  // 字数统计颜色
  .mdui-field-counter {
    color: @color-white-secondary;
  }

  // 聚焦状态
  .mdui-field-focus {

    .mdui-field-label {
      color: @color-default-a200;
    }
  }

  // 禁用状态
  .mdui-field-disabled {
    .mdui-field-label {
      color: @color-white-disabled;
    }
  }
});


/**
 * =============================================================================
 * ************   Textfield 强调色   ************
 * =============================================================================
 */
& {
  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
    .loop-accent-theme((@counter-color - 1));
    @colorName: extract(@globalAccentColors, @counter-color);

    .mdui-theme-accent-@{colorName} when not (@colorName =null) {

      @colorA700: 'color-@{colorName}-a700';
      @colorA200: 'color-@{colorName}-a200';

      .mdui-field-focus {

        .mdui-field-label,
        &>.mdui-icon {
          color: rgba(red(@@colorA700), green(@@colorA700), blue(@@colorA700), .87);
        }
      }

      // 暗色主题
      & {
        .dark-mode() {

          .mdui-field-focus {

            .mdui-field-label,
            &>.mdui-icon {
              color: @@colorA200;
            }
          }
        }

        &.mdui-theme-layout-dark {
          .dark-mode();
        }

        @media (prefers-color-scheme: dark) {
          &.mdui-theme-layout-auto {
            .dark-mode();
          }
        }
      }
    }
  }

  .loop-accent-theme(length(@globalAccentColors));
}